<template>
    <div class="dialog">
        <el-dialog :title="title" @close="dialogVisible" :visible="visible">
            <el-form :model="form" :rules="stuRules" ref='ipt'>
                <el-form-item label="头像">
                    <el-upload class="uploadAvatar" ref="uploadAvatar" action="/api/students/uploadStuAvatar"
                        list-type="picture-card" :on-success="uploadSuccess" :on-remove="removeAvatar" :limit="1" 
                        name="headimgurl" :multiple="false" :file-list="fileList">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                 </el-form-item>

                <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="项目地址" prop="productUrl">
                    <el-input v-model="form.productUrl" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级" prop="class">
                    <el-input v-model="form.class" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="城市" prop="city">
                    <el-input v-model="form.city" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学历" prop="degree">
                    <el-input v-model="form.degree" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="form.description" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible">取 消</el-button>
                <el-button type="primary" @click="subForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
    
    export default {
        props:{
            visible:{
                type:Boolean,
                default(){
                    return false
                }
            }
        },
        data(){
            return{
                title:'添加学员信息'
               ,
                form: {
                    name: '',
                    productUrl: '',
                    headigurl: '',
                    class: '',
                    age: '',
                    city: '',
                    degree: '',
                    description: '',
                },
                fileList:[],
                stuRules: {
                    name: [
                        { required: true, message: '请输入名字', trigger: 'blur' }
                    ],
                    class: [
                        { required: true, message: '请输入班级', trigger: 'blur' }
                    ],
                    degree: [
                        { required: true, message: '请输入学历', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: '请输入城市', trigger: 'blur' }
                    ],
                    productUrl: [
                        { required: true, message: '请输入项目地址', trigger: 'blur' }
                    ],
                    age: [
                        { required: true, message: '请输入年龄', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请输入描述', trigger: 'blur' }
                    ]
                },
            }
        },
        methods:{
            dialogVisible(){
                
                this.$emit('closeDialog')
            },
            subForm(){
                ////表单本地验证
                this.$refs['ipt'].validate(valid => {
                    if (valid) {
                        console.log('xixixi',this.form);
                        this.$emit('submit',this.form)  
                        this.form = {}   
                        this.$refs.uploadAvatar.clearFiles()
                       
                    }
                })

            },
            uploadSuccess(r){    //! 头像图片上传成功的回调
                console.log(r);
                if(r.state){
                    this.form.headigurl = r.headimgurl
                }else{
                    this.$message.error(r.msg)
                }
            },
            removeAvatar() {

            },
        }
    }

</script>